<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>绑定房号</title>
		<!-- 引入 WeUI -->
		<link rel="stylesheet" href="css/weui.css" />
		<link rel="stylesheet" href="css/example.css" />
		<link rel="stylesheet" href="css/roomsbinding.css" />
	</head>

	<body ontouchstart>
		<div class="container" id="container"></div>
		<script type="text/html" id="tpl_home">
			<div class="page page-home">
				<div class="content-div page__bd" id="test">
					<div class="phone-div border-b">
						<input class="input-w" type="text" v-model="phone" placeholder="输入电话号码" />
						<button id="button-code" class="button-c" v-bind:class="[codeIsClick ? 'button-yes' : 'button-no']" @click="getCode()">{{codeText}}</button>
					</div>
					<div class="phone-div">
						<input class="input-w" type="text" placeholder="输入验证码" />
					</div>
					<div class="color-g hint-div">
						注：电话号码要输入预留在房东那里的电话号码，第一次使用系统的用户会用该号码注册并绑定当前微信
					</div>
					<div class="button-view">
						<button class="button-g">获取绑定房间</button>
					</div>

				</div>
			</div>
			<!--<div id="toast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<i class="weui-icon-info weui-icon_toast color-g"></i>
					<p class="weui-toast__content">请输入正确的手机号码</p>
				</div>
			</div>-->
			<script type="text/javascript">
				//				alert(1)
				var vm = new Vue({
					el: '#test',
					data: {
						phone: '',
						codeText: '获取验证码',
						codeIsClick: true
					},
					methods: {
						getCode: function() {
							toast("我的自定义");
//							if(vm.codeIsClick) {
//								if(!isPoneAvailable(vm.phone)) {
//									var $toast = $('#toast');
//									$toast.fadeIn(100);
//									setTimeout(function() {
//										$toast.fadeOut(100);
//									}, 2000);
//									return;
//								}
//								getCodeByPhone();
//
//							}

						}
					}
				})

				function countDown() {
					time = 60;
					vm.codeText = time + "秒后重新发送";
					vm.codeIsClick = false;
					setInterval(function() {
						vm.codeText = time + "秒后重新发送";
						time--;
						if(time < 0) {
							vm.codeText = "重新发送";
							vm.codeIsClick = true;
						}
					}, 1000)
				}

				function getCodeByPhone() {
					get('/wx/m/sendCode', {
						mobile: vm.phone
					}, function(res) {}, function(res) {})
				}

				function toast(msg) {
//					var msg;
//					arguments[0] ? msg = arguments[0] : msg = '已完成';var toast;
					var toast = '\<div id="toast" style="display:none;">\<div class="weui_mask_transparent"></div>\<div class="weui_toast">\<i class="weui_icon_toast"></i>\<p class="weui_toast_content">' + msg + '</p>\</div>\</div>\';
//					if(!$('#toast').length) {
//						$('body').append(toast);
//					} else {
//						$('#toast.weui_toast_content').html(msg);
//					}
//					$('#toast').fadeIn('fast', function() {
//						setTimeout(function() {
//							$('#toast').fadeOut('fast');
//						}, 800);
//					});
				}
			</script>
		</script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script src="js/zepto.min.js"></script>
		<script src="js/example.js"></script>
		<script src="js/common.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</body>

</html>